"use client";

import { languages } from "@/src/i18n/setting";
import { MainContext } from "@/src/providers/MainProvider";
import { Tab, TabList, Tabs, useBreakpointValue, Box, Flex, Text } from "@chakra-ui/react";
import { useContext } from "react";

function Aside() {
  const { setCurrentTab, currentTab, t } = useContext(MainContext);
  
  // 使用Chakra UI的响应式工具，设置宽度
  const asideWidth = useBreakpointValue({ 
    base: '200px',  // 移动设备 (< 768px)
    md: '200px',    // 平板设备 (≥ 768px)
    lg: '200px',    // 小桌面设备 (≥ 992px)
    xl: '200px',    // 大桌面设备 (≥ 1280px)
    '2xl': '200px'  // 超大桌面设备 (≥ 1536px)
  }) || '200px';    // 默认值

  const onChangeTab = (index: number) => {
    const tabs = ["mouse", "pointer", "macro", "setting", "firmware", "about"];
    setCurrentTab(tabs[index]);
  };
  
  const tabs = ["kb-keyremap", "kb-light", "macro", "kb-setting", "kb-deviceinfo", "about"];
  
  // 菜单项目配置
  const menuItems = [
    {
      id: "kb-keyremap",
      lang: "51",
      name: "按键映射",
      icon: (
        <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="18" height="12" x="3" y="6" rx="2" stroke="currentColor" strokeWidth="1.5" />
          <path d="M7 10h10M7 14h5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
        </svg>
      )
    },
    {
      id: "kb-light",
      lang: "52",
      name: "灯光管理",
      icon: (
        <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 18a6 6 0 100-12 6 6 0 000 12z" stroke="currentColor" strokeWidth="1.5" />
          <path d="M18 12h2M4 12h2M12 6V4M12 20v-2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
        </svg>
      )
    },
    {
      id: "macro",
      lang: "53",
      name: "宏管理",
      icon: (
        <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6 9h12M6 12h12M6 15h8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
          <rect width="18" height="14" x="3" y="5" rx="2" stroke="currentColor" strokeWidth="1.5" />
        </svg>
      )
    },
    {
      id: "kb-setting",
      lang: "58",
      name: "键盘配置",
      icon: (
        <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 15.5c1.9 0 3.5-1.6 3.5-3.5S13.9 8.5 12 8.5 8.5 10.1 8.5 12s1.6 3.5 3.5 3.5z" stroke="currentColor" strokeWidth="1.5" />
          <path d="M19.6 9l-1.2-.7c-.1-.3-.1-.5-.2-.8l.4-1.3c.2-.5 0-1.1-.4-1.5l-1.1-1.1c-.4-.4-1-.5-1.5-.4l-1.3.4c-.3-.1-.5-.1-.8-.2L13 2.4c-.2-.6-.8-1-1.4-1h-1.6c-.7 0-1.2.4-1.4 1l-.5 1.2c-.3.1-.5.1-.8.2l-1.3-.4c-.5-.2-1.1 0-1.5.4L3.4 4.8c-.4.4-.5 1-.4 1.5l.4 1.3c-.1.3-.1.5-.2.8L2 9c-.6.2-1 .8-1 1.4v1.6c0 .7.4 1.2 1 1.4l1.2.5c.1.3.1.5.2.8l-.4 1.3c-.2.5 0 1.1.4 1.5l1.1 1.1c.4.4 1 .5 1.5.4l1.3-.4c.3.1.5.1.8.2l.5 1.2c.2.6.8 1 1.4 1h1.6c.7 0 1.2-.4 1.4-1l.5-1.2c.3-.1.5-.1.8-.2l1.3.4c.5.2 1.1 0 1.5-.4l1.1-1.1c.4-.4.5-1 .4-1.5l-.4-1.3c.1-.3.1-.5.2-.8l1.2-.5c.6-.2 1-.8 1-1.4v-1.6c0-.7-.4-1.2-1-1.4z" stroke="currentColor" strokeWidth="1.5" />
        </svg>
      )
    },
    {
      id: "kb-deviceinfo",
      lang: "59",
      name: "设备信息",
      icon: (
        <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="1.5" />
          <path d="M12 7v6M12 17v.01" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
        </svg>
      )
    }
  ];

  return (
    <>
      <style jsx global>{`
        .aside-container {
          background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 248, 240, 0.8) 100%);
          backdrop-filter: blur(15px);
          -webkit-backdrop-filter: blur(15px);
          color: black;
          height: calc(100vh - 64px);
          position: fixed;
          left: 0;
          top: 64px;
          overflow-y: auto;
          display: flex;
          flex-direction: column;
          border-right: 1px solid rgba(255, 165, 0, 0.2);
          box-shadow: 0 4px 20px rgba(255, 165, 0, 0.1);
          z-index: 900;
        }
        
        .aside-header {
          color: #333;
          padding: 20px 16px;
          font-size: 15px;
          font-weight: 500;
          border-bottom: 1px solid rgba(255, 165, 0, 0.15);
          background: rgba(255, 255, 255, 0.3);
        }
        
        .aside-footer {
          margin-top: auto;
          padding: 16px;
          color: rgba(0, 0, 0, 0.5);
          font-size: 14px;
          text-align: center;
          opacity: 0.7;
        }
        
        .menu-item {
          display: flex;
          align-items: center;
          padding: 12px 16px;
          cursor: pointer;
          transition: all 0.2s ease;
          border-left: 3px solid transparent;
          color: rgba(0, 0, 0, 0.75);
        }
        
        .menu-item:hover {
          background: rgba(255, 165, 0, 0.1);
          color: rgb(255, 140, 0);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
        }
        
        .menu-item.active {
          background: linear-gradient(90deg, rgba(255, 165, 0, 0.15) 0%, rgba(255, 140, 0, 0.1) 100%);
          color: rgb(255, 140, 0);
          border-left: 3px solid rgb(255, 140, 0);
          font-weight: 600;
          box-shadow: 0 2px 8px rgba(255, 165, 0, 0.1);
        }
        
        .menu-item.highlight {
          color: rgb(255, 140, 0);
          font-weight: 600;
        }
        
        .menu-icon {
          width: 20px;
          margin-right: 12px;
          opacity: 0.9;
        }
        
        .menu-text {
          font-size: 14px;
          letter-spacing: 0.3px;
        }
      `}</style>
      
      <Box className="aside-container" width={asideWidth}>
        <Box flex="1">
          {menuItems.map((item, index) => (
            <Flex
              key={item.id}
              className={`menu-item ${currentTab === item.id ? 'active' : ''} ${index === 0 ? 'highlight' : ''}`}
              onClick={() => index < tabs.length && setCurrentTab(tabs[index])}
            >
              <Box className="menu-icon">
                {item.icon}
              </Box>
              <Text className="menu-text">
                {t(item.lang)}
              </Text>
            </Flex>
          ))}
        </Box>
        
        <Box className="aside-footer">
          dk hub v1.0.0
        </Box>
      </Box>
    </>
  );
}

export default Aside;
